<template>
	<!-- 公告 -->
	<div class="component-item">
		<div class="notice-diy" :style="{'background': item.bgColor, 'border-radius': item.bgStyle == 'circle' ? '6px' : '0px', 'margin-top': item.pageMargin + 'px', 'padding-left': item.bgMargin + 'px', 'padding-right': item.bgMargin + 'px'}">
			<div class="notice-img">
				<img :src="domain + item.icon" style="width: 90px;height: 30px;"/>
			</div>
			<div class="notice-content-box">
				<swiper class="swiper" circular autoplay="true" interval="10000" duration="1000" :vertical="item.slider == 1">
					<block v-for="(notice, nIndex) in item.content" :key='nIndex'>
						<swiper-item catchtouchmove='catchTouchMove'>
							<view class="notice-content" :style="{'color': item.fontColor, 'font-size': item.fontSize + 'px', 'text-align': item.textAlign}" @click="navTo(notice.link)">
								{{ notice.title }}
							</view>
						</swiper-item>
					</block>
				</swiper>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "notice",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			domain: {
				type: String,
				default: ""
			},
			menuMap: {
				type: Array,
				default() {
					return []
				}
			},
		},
		
		methods: {
			// 页面跳转
			navTo(url) {
				if (this.menuMap.indexOf(url) != -1) {
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
		}
	}
</script>

<style scoped>
.notice-diy {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
}
.notice-box {
	height: 100%;  
	white-space: nowrap;
	overflow: hidden;
}
.notice-img {
    width: 120px;
    height: 40px;
}
.notice-img img {
    margin-top: 5px;
    margin-left: 20px;
}
.notice-content-box {
	width: 230px;
	overflow:hidden;
	white-space: nowrap;
	height: 40px;
	line-height: 40px;
}
.notice-content {
    font-size: 14px;
    width: 230px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
}
.notice {
	flex-direction:column;
	line-height: 20px;
	align-items: center;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
}
.on .notice {
	border: 1px solid #1890ff!important;
	color: #1890ff;
	height: calc(100% - 2px);
	width: calc(100% - 2px);
}
</style>